<!DOCTYPE html>
<html>

<head lang='zh'>
	<meta charset='utf-8'>
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<meta name="renderer" content="webkit" />
	<meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=0" />
	<title>Luckysheet</title>

	<link rel='stylesheet' href='./plugins/css/pluginsCss.css' />
	<link rel='stylesheet' href='./plugins/plugins.css' />
	<link rel='stylesheet' href='./css/luckysheet.css' />
	<link rel='stylesheet' href='./assets/iconfont/iconfont.css' />
	<script src="./plugins/js/plugin.js"></script>

	<!-- rollup luckysheet.js -->
	<script src="./luckysheet.umd.js"></script>
	<!-- <script src="./controllers/cellTree.js"></script> -->
	<!-- <script type="text/javascript" src="./plugins/js/jquery-1.4.4.min.js"></script>
	<script type="text/javascript" src="./plugins/js/jquery.ztree.core.js"></script> -->

</head>

<body>
	<!-- Non-full screen test -->
	<!-- <div style="position: relative;width: 100%;height: 100%;">

		<div id="luckysheet" style="margin:0px;padding:0px;position:absolute;width:80%;height:500px;left: 20%;top: 200px;bottom:0;right: 0;"></div>
	</div> -->
	<!-- <div class="content_wrap">
		<div class="zTreeDemoBackground left">
			<ul id="treeDemo" class="ztree"></ul>
		</div>
	</div> -->
	<!-- <div id="btnAaaaaa" style="position:fixed;z-index:9999;">保存数据 </div> -->
	<div id="luckysheet"
		style="margin:0px;padding:0px;position:absolute;width:100%;height:100%;left: 0px;top: 0px;background-color: #fff;">
	</div>
	<!-- demo feature, non-production use -->
	<script src="./demoData/sheetEmpty.js"></script>
	<script src="./demoData/demoFeature.js"></script>
	<script src="./demoData/sheetFormula.js"> </script>
	<script src="./demoData/sheetCell.js"></script>
	<script src="./demoData/sheetConditionFormat.js"></script>
	<script src="./demoData/sheetTable.js"></script>
	<script src="./demoData/sheetComment.js"></script>
	<script src="./demoData/sheetPivotTableData.js"></script>
	<script src="./demoData/sheetPivotTable.js"></script>
	<script src="./demoData/sheetSparkline.js"></script>
	<script src="./demoData/sheetChart.js"></script>
	<script src="./demoData/sheetPicture.js"></script>
	<script src="./demoData/sheetDataVerification.js"></script>

	<script>
		// import sheetFormula from './demoData/sheetFormula.js'
		// import sheetCell from './demoData/sheetCell.js'
		// import sheetConditionFormat from './demoData/sheetConditionFormat.js'
		// import sheetTable from './demoData/sheetTable.js'
		// import sheetComment from './demoData/sheetComment.js'
		// import sheetPivotTableData from './demoData/sheetPivotTableData.js'
		// import sheetPivotTable from './demoData/sheetPivotTable.js'
		// import sheetSparkline from './demoData/sheetSparkline.js'
		// import sheetChart from './demoData/sheetChart.js'
		// import sheetPicture from './demoData/sheetPicture.js'
		// import sheetDataVerification from './demoData/sheetDataVerification.js'

		$(function () {
			// According to the browser language
			var lang = luckysheetDemoUtil.language() === 'zh' ? 'zh' : 'en';
			var isShare = luckysheetDemoUtil.getRequest().share; // '?share=1' opens the collaborative editing mode
			var gridKey = luckysheetDemoUtil.getRequest().gridKey; // workbook id for collaborative editing, or directly define here
			var options = null;

			if (isShare || gridKey) {
				// http://localhost:3000/?gridKey=12eyy789-kk45ofid-23737245
				if (!gridKey) {
					alert('If gridKey is not provided in the address bar, please add it in the source code')
				}
				options = {
					container: "luckysheet",
					compType: 'design',
					lang: lang,
					allowUpdate: true,
					showinfobar: false,
					// updateImageUrl: location.origin + "/luckysheet/api/updateImg",
					// updateUrl: "ws://" + location.host + "/luckysheet/websocket/luckysheet",
					gridKey: gridKey,
					// loadUrl: location.origin + "/luckysheet/api/load",
					// loadSheetUrl: location.origin + "/luckysheet/api/loadsheet"
				}
			} else {
				options = {
					container: 'luckysheet',
					compType: 'filling', //'filling'
					lang: lang,
					showinfobar: false,
					// loadUrl: 'http://192.168.20.54:18186/jeecg-boot/elects/json',
					// pager: {
					// 	pageIndex: 1,
					// 	pageSize: 10,
					// 	total: 50,
					// 	selectOption: [10, 20]
					// },
					forceCalculation: false,
					plugins: ['chart'],
					fontList: [
						{
							"fontName": "HanaleiFill",
							"url": "./assets/iconfont/HanaleiFill-Regular.ttf"
						},
						{
							"fontName": "Anton",
							"url": "./assets/iconfont/Anton-Regular.ttf"
						},
						{
							"fontName": "Pacifico",
							"url": "./assets/iconfont/Pacifico-Regular.ttf"
						}
					],
					hook: {
						cellDragStop: function (cell, postion, sheetFile, ctx, event) {
							// console.info('cellDragStop', cell, postion, sheetFile, ctx, event);
						},
						rowTitleCellRenderBefore: function (rowNum, postion, ctx) {
							// console.log('rowTitleCellRenderBefore', rowNum, postion, ctx);
						},
						rowTitleCellRenderAfter: function (rowNum, postion, ctx) {
							// console.log('rowTitleCellRenderAfter', ctx);
						},
						columnTitleCellRenderBefore: function (columnAbc, postion, ctx) {
							// console.log('columnTitleCellRenderBefore', columnAbc);
						},
						columnTitleCellRenderAfter: function (columnAbc, postion, ctx) {
							// console.log('columnTitleCellRenderAfter', postion);
						},
						cellRenderBefore: function (cell, postion, sheetFile, ctx) {
							// console.log('cellRenderBefore', cell, postion, sheetFile, ctx);
						},
						cellRenderAfter: function (cell, postion, sheetFile, ctx) {
							// console.log('cellRenderAfter', postion);
						},
						cellMousedownBefore: function (cell, postion, sheetFile, ctx) {
							// console.log('cellMousedownBefore', cell, postion, sheetFile, ctx);
							// if (cell && cell.readonly) {
							// 	$('#luckysheet-input-box').hide()
							// 	return false
							// }

						},
						cellMousedown: function (cell, postion, sheetFile, ctx) {
							//等双击后luckysheet-input-box的top值改变后，判断双击事件，单击不执行
							setTimeout(() => {
								if (window.$('#luckysheet-input-box').position().top > 0) {
									console.log(sheetFile.dataVerification[postion.r + '_' + postion.c].type)
									if (sheetFile.dataVerification[postion.r + '_' + postion.c].type == 'tree') {
										window.initCellTree(postion, 1)
										// luckysheet.setCellValue(postion.r, postion.c,1)
									} else if (sheetFile.dataVerification[postion.r + '_' + postion.c].type == 'dialog') {
										window.initCellDialog(postion, 1)
										// luckysheet.setCellValue(postion.r, postion.c,1)
									} else if (sheetFile.dataVerification[postion.r + '_' + postion.c].type == 'dictRender') {
										window.initCellDict(postion, 1)
										// luckysheet.setCellValue(postion.r, postion.c,1)
									}
								}
							}, 100)
						},
						sheetMousemove: function (cell, postion, sheetFile, moveState, ctx) {
							// console.log('sheetMousemove', cell, postion, sheetFile, moveState, ctx);
						},
						sheetMouseup: function (cell, postion, sheetFile, moveState, ctx) {
							const active = window.activeDBData
							const targeDom = document.getElementById('luckysheet-modal-dialog-slider-dataconfig')
							if (!targeDom || !active) return
							const event = window.event
							const X = event.clientX
							const X1 = targeDom.offsetLeft
							if (X < X1) {
								// console.log('sheetMouseup', cell, postion, sheetFile, moveState, ctx);
								// 仅在设计模式下调用次方法
								luckysheet.setCellValue(postion.r, postion.c, {
									m: active.acValue, v: active.acValue,
									dataMark: { type: 'DBFiled', isList: true }
								})
								luckysheet.setDbMark(sheetFile, {
									r: postion.r,
									c: postion.c,
									m: active.acValue,
									v: active.acValue,
									titleReadonly: true,
									dataMark: { type: 'DBFiled', isList: true }
								})
							}
						},
						cellAllRenderBefore: function (data, sheetFile, ctx) {
							// console.info(data, sheetFile, ctx)
						},
						updated: function (operate) {
							// console.info('updated', operate)
						},
						cellUpdateBefore: function (r, c, value, isRefresh) {
							// console.info('cellUpdateBefore', r, c, value, isRefresh)
						},
						cellUpdated: function (r, c, oldValue, newValue, isRefresh) {
							// console.info('cellUpdated', r, c, oldValue, newValue, isRefresh)
						},
						sheetActivate: function (index, isPivotInitial, isNewSheet) {
							// console.info('sheetActivate', index, isPivotInitial, isNewSheet)
						},
						rangeSelect: function (sheet, range) {
							// console.info('rangeSelect', range)
							window.selectActive = range

						},
						sheetCreateAfter: function () {
							// $('#luckysheet-input-box').hide()
						},
						commentInsertBefore: function (r, c) {
							// console.info('commentInsertBefore', r, c)
						},
						commentInsertAfter: function (r, c, cell) {
							// console.info('commentInsertAfter', r, c, cell)
						},
						commentDeleteBefore: function (r, c, cell) {
							// console.info('commentDeleteBefore', r, c, cell)
						},
						commentDeleteAfter: function (r, c, cell) {
							// console.info('commentDeleteAfter', r, c, cell)
						},
						commentUpdateBefore: function (r, c, value) {
							// console.info('commentUpdateBefore', r, c, value)
						},
						commentUpdateAfter: function (r, c, oldCell, newCell) {
							//console.info('commentUpdateAfter', r, c, oldCell, newCell)
						},
						cellEditBefore: function (range) {
							// console.info('cellEditBefore',range)
							// console.info('cellEditBefore',range[0].row[0])
							// console.info('cellEditBefore',range[0].column[0])		
							// const sheetsData = luckysheet.getAllSheets()
							// console.info(sheetsData)
							// console.info(sheetsData[0].dataVerification[range[0].row[0] + '_' + range[0].column[0]])
							// if (sheetsData[0].dataVerification[range[0].row[0] + '_' + range[0].column[0]].type == 'tree') {
							// 	window.initCellTree({r:range[0].row[0], c:range[0].column[0]})
							// }
							// console.log(sheetFile.dataVerification[postion.r + '_' + postion.c])
						},
						workbookCreateAfter: function (json) {
							// console.info(json)
						},
						rangePasteBefore: function (range, data) {
							// console.info('rangePasteBefore', range, data)
						},
					},
					data: [sheetEmpty]
					// [sheetDataVerification, sheetCell, sheetFormula, sheetConditionFormat, sheetSparkline, sheetTable, sheetComment, sheetPivotTableData, sheetPivotTable, sheetChart, sheetPicture,]
				}
			}
			options.loading = {
				image: () => {
					return `<svg viewBox="25 25 50 50" class="circular">
					<circle cx="50" cy="50" r="20" fill="none"></circle>
					</svg>`
				},
				imageClass: "loadingAnimation"
			}
			options.cellRightClickConfig = {
				customs: [{
					title: 'test',
					onClick: function (clickEvent, event, params) {
						// console.log('function test click', clickEvent, event, params)
					}
				}]
			}
			luckysheet.create(options);
			// luckysheet.sheetmanage.luckysheetextendtable('row', 0, 100, true)
			// luckysheet.sheetmanage.luckysheetextendtable('column', 0, 4, true)
			// luckysheet.setRangeShow({ row: [0, 0], column: [0, 0] }, { show: false })
			// setTimeout(() => {
			// luckysheet.sheetmanage.setSheetDataByJson(sheetEmpty, options, [], {})  // data
			// }, 100)

			// luckysheet.exitEditMode()
			$("#btnAaaaaa").click(function () {
				// luckysheet.exitEditMode()  // 推出编辑模式然后保存数据
				// const sheetsData = luckysheet.getAllSheets()
				// const sheetsData = luckysheet.getSheetData()
				// const sheetsData = luckysheet.getSheetDataToJson()
				// 对dbMark进行排序  保证解析时按照对应顺序解析
				// if (sheetsData.dbMark) {
				// 	const ordered = {}
				// 	Object.keys(sheetsData.dbMark).sort().forEach(item => ordered[item] = sheetsData.dbMark[item])
				// 	sheetsData.dbMark = ordered
				// }
				// console.log('sheetsData,', JSON.stringify(sheetsData))
				luckysheet.exitEditMode()  // 推出编辑模式然后保存数据
				//const sheetsData = luckysheet.getAllSheets()
				// const sheetsData = luckysheet.getSheetData()
				//sheetsData转化为后台需要的Json数据
				const sheetsData = luckysheet.getSheetDataToJson()
				// luckysheet.exitEditMode()
				// let string = JSON.stringify(sheetsData);
				// 转换成Blob类型数据
				// var blobData = new Blob(sheetsData, { type: 'application/json' });
				// console.log(blobData)
				// let blobData = new Blob([string]);
				// var data = new FormData();
				// data.append('files', blobData);
				// const params = { list: sheetsData }
				let data = JSON.stringify(sheetsData)
				const len = encodeURIComponent(data)
				if (len.length > 1000) {
					data = pako.gzip(data, { to: 'string' })
				}
				$.ajax({
					url: 'http://192.168.20.54:18186/jeecg-boot/elects/gzip',
					type: 'post',
					dataType: 'text',
					data: data,
					// processData: false,
					// contentType: false,
					// mimeType: 'multipart/form-data',
					headers: {
						"content-Encoding": len.length > 1000 ? 'gzip' : ''
					},
					success: (res) => {
						if (res.code === 200) {
							let reader = new FileReader()
							reader.onload = function (e) {
								const readerres = reader.result
								const paraseObj = JSON.parse(readerres)
								console.log('paraseObj', paraseObj)
							}
							reader.readAsText(res.result, 'utf-8')
						}
					}
				})
			})
		})
	</script>
	<style>
		/* 自定义loading演示样式 */
		@keyframes loading-rotate {
			0% {
				transform: rotate(0deg);
			}

			100% {
				transform: rotate(360deg);
			}
		}

		@keyframes loading-dash {
			0% {
				stroke-dasharray: 1, 200;
				stroke-dashoffset: 0;
			}

			50% {
				stroke-dasharray: 90, 150;
				stroke-dashoffset: -40px;
			}

			100% {
				stroke-dasharray: 90, 150;
				stroke-dashoffset: -120px;
			}
		}

		.loadingAnimation {
			width: 3em;
			height: 3em;
			animation: loading-rotate 2s linear infinite;
		}

		.loadingAnimation circle {
			animation: loading-dash 1.5s ease-in-out infinite;
			stroke-dasharray: 90, 150;
			stroke-dashoffset: 0;
			stroke-width: 2;
			stroke: currentColor;
			stroke-linecap: round;
		}
	</style>
</body>

</html>